<template>
  <div id="video-player" class="video-player"></div>
</template>
<script>
import Player from 'xgplayer'
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      player: null, //实例,
      danmuID: 0,
      urlList: []
    }
  },
  mounted() {
    // 初始化播放器
    this.initPlayer()
    this.$EventBus.$on('sentMsg', (data) => {
      this.sendMsg(data)
    })
  },
  // 监听播放路径的变化
  watch: {
    url: {
      handler(newValue, oldValue) {
        if (!this.player) {
          this.initPlayer()
          return
        }
        this.player.src = this.url
      }
    }
  },
  methods: {
    initPlayer() {
      if (!this.url) return console.warn('url is not esist')
      const config = {
        id: 'video-player',
        url: this.url,
        playNext: {
          urlList: this.urlList
        },
        fluid: true,
        download: true, //设置download控件显示
        miniplayer: true,
        miniplayerConfig: {
          bottom: 200,
          right: 0,
          width: 320,
          height: 180
        },
        screenShot: {
          saveImg: true,
          quality: 0.92,
          type: 'image/png',
          format: '.png'
        },
        keyShortcut: 'on',
        keyShortcutStep: { //设置调整步长
          currentTime: 15, //播放进度调整步长，默认10秒
          volume: 0.2 //音量调整步长，默认0.1
        },
        /**倍速播放 */
        playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1,
        danmu: {
          panel: true, // 弹幕面板
          comments: [
            {
              duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
              id: 1, //弹幕id,需唯一
              prior: false, // 弹幕优先显示，默认false
              color: false, // 彩色弹幕，默认false
              txt: '', // 弹幕文字内容
              style: { // 弹幕自定义样式
                color: '#ffffff',
                fontSize: '20px',
                borderRadius: '50px',
                padding: '5px 11px',
                backgroundColor: 'rgba(255, 255, 255, 0.1)'
              }
            }

          ],
          closeDefaultBtn: false //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
        },
        playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
        'x5-video-orientation': 'portraint',
        /**画中画 */
        pip: true,
        pipConfig: {
          bottom: 100,
          right: 100,
          width: 320,
          height: 180
        },
        // download: true,
        /**初始化首帧 */
        videoInit: true,
        autoplay: false
      }
      //========================== 2，开始实例化======================
      const player = new Player(config)

      if (player) {
        this.player = player
        /* 这里注册监听 */
        // 监听视频开始播放 播放传给父组件的是true
        this.player.on('play', () => {
          this.$emit('triggerEvent', true)
        })
        // 监听视频已经暂停 暂停传给父组件的是true
        this.player.on('pause', () => {
          this.$emit('triggerEvent', false)
        })
        // 监听 视频退出全屏
        // this.player.on('exitFullscreen', () => {
        //   window.scrollTo(0, 0);
        //   console.log('已经退出全屏了');
        // });
      }
    },
    // IOS设备设置，防止被浏览器劫持
    isAppleDevice() {
      const ua = navigator.userAgent.toLowerCase()
      return /iphone|ipad|phone|Mac/i.test(ua)
    },
    sendMsg(data) {
      if (data) {
        // 发送弹幕消息
        this.player.danmu.sendComment({
          duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
          id: 'chat' + this.danmuID++, //弹幕id,需唯一
          txt: data, // 弹幕文字内容
          style: { // 弹幕自定义样式
            color: '#ffffff',
            fontSize: '20px',
            borderRadius: '50px',
            padding: '5px 11px',
            backgroundColor: 'rgba(255, 255, 255, 0.1)'
          }
        })
      }
    }

  }
}
</script>
<style scoped>
::v-deep .xgplayer-panel-slider {
  width: 260px;
  bottom: 40px;
}

.video-player {
  z-index: 997 !important;
}

::v-deep .xgplayer-panel {
  margin-left: 12px;
}

::v-deep .xgplayer-volume .xgplayer-slider {
  height: 100px !important;
}

::v-deep .xgplayer-danmuspeed {
  margin-top: 5px;
}

::v-deep .xgplayer-showarea {
  margin-top: 12px !important;
}

::v-deep.xgplayer-showarea-full-dot, ::v-deep .xgplayer-showarea-onequarters-dot, ::v-deep .xgplayer-showarea-threequarters-dot, ::v-deep .xgplayer-showarea-twoquarters-dot, ::v-deep.xgplayer-showarea-zero-dot, ::v-deep .xgplayer-danmuspeed-small-dot, ::v-deep .xgplayer-danmuspeed-middle-dot, ::v-deep .xgplayer-danmuspeed-large-dot, ::v-deep .xgplayer-danmufont-small-dot, ::v-deep .xgplayer-danmufont-middle-dot, ::v-deep .xgplayer-danmufont-large-dot {
  width: 9px !important;
  height: 9px !important;
  border: none !important;
  top: 15px !important;
}

::v-deep .xgplayer-playbackrate ul li {
  padding: 10px 0 !important;
}
</style>


